<template>
  <!-- 使用 JavaScript 表达式 -->
  <h3>{{ message.split('').join('-') }}</h3>
  <button @click="add">递增</button>
  <p>ref：{{ num }}--reactive深层次的修改数据：{{ count.type.count }}</p>
  <button @click="deduct">递减语法糖</button>
  <!-- <h1>{{ deduct_num }}</h1> -->
</template>

<script setup>
import { ref, reactive, nextTick } from 'vue'
let message = ref('20221123')
let num = ref(0)
const count = reactive({
  type: {
    count: 0
  }
})

function add() {
  num.value++;
  nextTick(() => {
    // 访问更新后的 DOM
    console.log(num.value)
  })
  count.type.count++
}

// console.log(Proxy)

// ref语法糖$ref现在还在实验中（Experimental），不能使用，需要配置写东西才能使用
// let deduct_num = $ref(100)
// function deduct() {
//   deduct_num--
// }
</script>

<style lang="less" scoped>

</style>
